
import { ComponentProps, Hook, Mut, VueComponent } from "vue3-oop";
import { FormItem, Input,InputNumber,RadioGroup,RadioButton,notification } from 'ant-design-vue';
import { WidgetItem } from '@/components/FormDesigner/types';
import { FIELD } from "../attr-widget";

interface IProps {
  widgetItem: WidgetItem
}
export default class CfgField extends VueComponent<IProps> {
  static defaultProps: ComponentProps<IProps> = {
    widgetItem: {}
  }

  @Mut() state = {
    field_code : ''
  }

  @Hook('Mounted')
  onMounted(){
    const { widgetItem } = this.props;
    const attr = widgetItem[widgetItem.type] as FIELD
    this.state.field_code = attr.field_code;
  }

  render() {
    const { widgetItem } = this.props;
    const attr = widgetItem[widgetItem.type] as FIELD
    return (
      <>
        <FormItem label="字段编码" required>
          <Input size='small'
            value={this.state.field_code}
            onChange={(e)=>{this.state.field_code = e.target.value as string}}
            onBlur={(e) => {
              const patt = '^_?[a-zA-Z]+\\w*$'
              const reg = new RegExp(patt);
              if (!reg.test(this.state.field_code)) {
                notification.close('validate:fieldCode')
                notification.error({
                  key: 'validate:fieldCode',
                  message: '参数校验失败',
                  description: '字段编码应符合以下划线或字母起始的含下划线、字母、数字的字符串！',
                  placement: 'bottomRight',
                  bottom: '1px',
                })
                this.state.field_code = attr.field_code;
              } else {
                attr.field_code = this.state.field_code;
              }
            }}
          />
        </FormItem>
        <FormItem label="字段标签">
          <Input size='small'
            value={attr.field_label}
            onChange={(event) => { attr.field_label = event.target.value as string; }}
          />
        </FormItem>
        <FormItem label="默认值">
          <Input size='small'
            value={attr.field_default}
            onChange={(event) => { attr.field_default = event.target.value as string; }}
          />
        </FormItem>
      </>
    )
  }
}